// 9.给子路由一个路由出口，outLet
// 10.前往router页面配置重定向
import Aheader from "../components/aheader";
import { Outlet } from "react-router-dom"
// 1.引入 antd 的 layout页面布局
import { useEffect, useState } from "react";
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    UploadOutlined,
    UserOutlined,
    VideoCameraOutlined,
} from '@ant-design/icons';
// import { Button, Layout, Menu, theme } from 'antd';
import { Button, Layout, Menu, theme } from 'antd';
// const { Header, Sider, Content } = Layout;
// 3.通过 react-redux 中的 useSelector 获取切片中的状态
import { useSelector, useDispatch } from "react-redux";
import Aside from "../components/aside";

import RouterAuth from "../router/routerAuth";
const { Content } = Layout;

export default function Main() {
    // const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();

    // 4.获取状态
    const isCollapse = useSelector((state) => {
        return state.tabReducer.isCollapse
    })

    return (
        <RouterAuth>
            {/* 高阶组件， 将main页面作为 插槽传入 RouterAuth 中， 如果符合条件(有token)， 就将插槽内容return ,即返回一个组件 */}
            <Layout className="main-container">
                {/* 2.对layout组件进行拆分，前往aside.js页面 */}
                <Aside collapsed={isCollapse} />
                <Layout> {/* 5.传递状态， 先前往aheader页面控制状态改变 */}
                    <Aheader collapsed={isCollapse} />
                    <Content
                        style={{
                            margin: '24px 16px',
                            padding: 24,
                            minHeight: 280,
                            background: colorBgContainer,
                            borderRadius: borderRadiusLG,
                        }}
                    >
                        <Outlet></Outlet>
                    </Content>
                </Layout>
            </Layout>
        </RouterAuth>
    );
}